<!DOCTYPE html>
<html>
<head>
    <title>Property View: ${beanName}, ${name}</title>
    <link rel="stylesheet" type="text/css" href="${rootPath}/static/css/bootstrap.min.css"/>
</head>
<body class="container">
<div id="app">
    <app :value="value" :changeUrl="changeUrl" :source="source"/>
</div>

<!--  define template -->
<script type="text/x-template" id="property-change-form-template">
<form v-if="writable" id="changePropertyForm" class="form" method="post">
    <div class="form-group">
        <div v-if="type == 'boolean'" class="radio">
            <label>
                <input v-model.boolean="formState.newValue" type="radio" value="true" name="newValue" class="radio-inline" :checked="value.originValue">true</input>
            </label>
            <label>
                <input v-model.boolean="formState.newValue" type="radio" value="false" name="newValue" class="radio-inline" :checked="!value.originValue">false</input>
            </label>
        </div>
        <textarea v-else class="form-control" rows="5" v-model="formState.newValue" name="newValue"></textarea>
    </div>
    <div class="form-group">
        <input @click="submit" class="btn btn-default" type="button" value="Change"/>
    </div>
    <p class="errorMsg bg-warning">{{formState.changeResult}}</p>
</form>
</script>

<script type="text/x-template" id="app-template">
<div>
    <div class="row">
        <div class="well">
            Bean Name: <a :href="'${rootPath}/' + beanUrl">${beanName}</a><br/>
            Bean Class: <span>${beanClass}</span>
        </div>
    </div>

    <div class="row">
    </div>

    <div class="row">
        <table class="table table-bordered table-condensed table-hover">
            <thead>
                <tr> <th>#</th> <th>value</th> </tr>
            </thead>
            <tbody>
                <tr> <td :title="source">Name</td> <td>${name}</td> </tr>
                <tr> <td>Type</td> <td>${type}</td> </tr>
                <tr>
                    <td>Value</td>
                    <td>
                        <prop-value v-if="value" :value="value" :prop="propertyName"/>
                    </td>
                </tr>
            </tbody>
            <!-- <tfoot></tfoot> -->
        </table>

        <property-change-form :changeUrl="changeUrl" :value="value" :type="type" :writable="writable" :propertyName="propertyName" :beanName="beanName" :contextId="contextId"/>
    </div>
</div>
</script>

<script type="text/javascript" src="${rootPath}/static/js/vue.js"></script>
<script type="text/javascript" src="${rootPath}/static/js/jquery-3.1.1.min.js"></script>

<script type="text/javascript">
    var staticUrlPrefix = "${staticUrlPrefix}";
    var testState = {
        value: {"tip":"", toString: "false"},
        type: "boolean",
        writable: true,
        source: "STANDARD",
    };
    var initState = {
        value: ${value},
        type: "${type}",
        writable: ${writable},
        source: ${source},
        changeUrl: "${rootPath}/change",
        propertyName: "${name}",
        beanName: "${beanName}",
        contextId: "${contextId}",
        beanUrl: "${beanUrl}",
    };

    Vue.component('prop-value', function(resolve, reject) {
        $.get("${rootPath}/static/fragment/property-value.html").then(function (resp) {
            resolve({
                props: ['value', 'prop'],
                template: resp
            })
        });
    });
    Vue.component('property-change-form', {
        props: ['changeUrl', 'type', 'writable', 'value', 'contextId', 'propertyName', 'beanName'],
        template: '#property-change-form-template',
        data: function() {
            var newValue = null;
            if (this.type == 'boolean') {
                newValue = this.value.originValue;
            }
            return {
                formState: {
                    newValue: newValue,
                    changeResult: null
                }
            };
        },
        methods: {
            buildSubmitData: function() {
                return {
                    contextId: this.contextId,
                    propertyName: this.propertyName,
                    beanName: this.beanName,
                    newValue: this.formState.newValue
                }
            },
            submit: function() {
                var formState = this.formState;
                var submitData = this.buildSubmitData();
                $.post({
                    url: this.changeUrl,
                    data: submitData,
                    dataType: 'json',
                    success: function(resp) {
//                    console.log('resp: ', resp);
                        if (resp.success) {
                            window.location.reload();
                        } else {
                            formState.changeResult = resp.errorMsg;
                        }
                    }
                });
            }
        }
    });

    var app = new Vue({
        el : '#app',
        template: '#app-template',
        data : function() {
            if (initState) return initState;
            else return testState;
            //return testState;
        },
        methods: {
            changeProp: function(event) {

            }
        }
    });
</script>

</body>
</html>